<template>
	<view class="contentView">
		<view class="balanceBox">
			<view class="balanceShopInfo">
				<image :src="shopData.image"></image>
				<view class="balanceShopName lr_spacing">
					<text style="font-size:28rpx;font-weight: bold;">{{ shopData.shopName }}</text>
					<text>手机号：{{ shopData.phone }}</text>
				</view>
				<image style="width:40rpx;height:40rpx;margin-left:auto;"
					src="https://test.jhwl.site/static/img/set.png" @click.stop="setUpBtn()"></image>
			</view>
			<view class="walletBalanceBox">
				<view class="walletBalanceBoxS">
					<view class="lr_spacing walletBalanceBoxView">钱包余额(元)</view>
					<view class="walletBalance walletBalanceBoxView">{{ shopData.amount }}</view>
				</view>
				<view class="walletBalanceBoxXS" v-if="pageType == '1'" @click="listBtn"><text>查看线上流水</text></view>
				<view class="walletBalanceBoxA" v-if="pageType == '2'">
					<view class="lr_spacing walletBalanceBoxView">今日营业额</view>
					<view class="walletBalance walletBalanceBoxView">{{ shopData.todayAmount }}</view>
				</view>
			</view>
			<view class="availableBalanceBox" @click="operateLineBtn(1)">
				<view class="lr_spacing">可提现金额</view>
				<view class="availableBalance">{{ shopData.Kamount }}</view>
			</view>
			<view class="settlementBalanceBox">
				<view class="lr_spacing">待结算金额</view>
				<view class="availableBalance">{{ shopData.Damount }}</view>
			</view>
		</view>
		<view class="layer" v-show="layerType == true" @click="layerType = false"></view>
		<view class="layerBox" v-show="layerType == true">
			<view class="shopTitle">{{shopInfo.name ? shopInfo.name :'线上收益'}}</view>
			<uDatetimePicker class="example-body" placeholder="至" v-model="range" :clear-icon="false" type="daterange"
				start-placeholder="开始日期" end-placeholder="结束日期" @change="dayChange" />
			<scroll-view class="layerScrollView" scroll-y="true" @scrolltolower="layerLower">
				<view v-for="item in shopList" class="layerContent">
					<view class="uvCollapseShopImg">
						<image :src="item.from_headimg"></image>
					</view>
					<view class="uvCollapseShopInfo" style="margin-left:8rpx;">
						<view class="overHidden">{{ item.from_nickname }}</view>
						<view class="overHidden">{{item.remark}}</view>
						<view class="timeByMoney">
							<text>{{ item.createtime }}</text>
							<text class="themeColor weight_bold">+{{ ' ' }}{{ item.commission?item.commission:'0.00' }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import uDatetimePicker from '../uni-datetime-picker_2.2.25/components/uni-datetime-picker/uni-datetime-picker.vue';
	import person from '../utils/person.js';
	export default {
		components: {
			uDatetimePicker,
		},
		
		name: "withdrawal",
		data() {
			return {
				layerType:false,//是否打开弹窗
				start_date: '', // 开始日期
				end_date: '', // 结束日期
				range: [],//存放时间list
				contentHeight: 0, //自身高度
				bankcardnum: '', //银行卡号
				pageType: 0, //默认状态
				page:1,//当前页
				shopList:[], //数据list
				totalPage:0,//总页面
				shopData:{
					shopName: '惊鸿网络科技', //门店名称
					image: 'https://test.jhwl.site/static/img/login-qq.png', //门店图片
					amount: '0.00', //余额
					Damount: '0.00', //待结算金额
					Kamount: '0.00', //可体现金额
					phone: '139****8741',//手机号
					todayAmount:'0.00',//今日营业额
				},
			}
		},

		mounted() {
			this.$nextTick(function() {
				this.pageType = uni.getStorageSync('pageType');
				this.shopData = person.shopData;
			});
			uni.createSelectorQuery().in(this).select('.contentView').boundingClientRect((rect) => { //获取自身高度
				this.contentHeight = rect.height;
			}).exec();
		},

		methods: {
			// 日期改变
			dayChange(e) {
				this.page = 1;
				this.range = e;
				this.start_date = this.range[0];
				this.end_date = this.range[1];
				this.shopList = [];//清空数据
				this.getDataFun();
			},
			
			//点击查看线上流水
			listBtn(){
				if(this.shopList.length <= 0){
					this.page = 1;
					this.shopList = [];//清空数据
					this.getDataFun();
				}else{
					this.layerType = true;
				}
			},
			
			//获取数据
			getDataFun(){
				let _this = this;
				this.layerType = true;
				app.get('ApiAgent/parnerrecord', {
					is_online:1,
					page: _this.page,
					limit: 20,
					start_date:_this.start_date,
					end_date:_this.end_date
				}, function(res) {
					let listData = res.data.data;
					_this.totalPage = res.data.last_page; 
					listData.forEach(item => {
						_this.shopList.push(item);
					})
				});
			},

			//点击提现事件
			operateLineBtn(index) {
				let _this = this;
				app.get('ApiMy/set', {}, function(data) {
					if (data.userinfo.bankcardnum != '' && data.userinfo.bankcardnum != undefined) {
						app.goto('/pagesZ/extract/extract');
					} else {
						app.goto('/pagesExt/my/setbankinfo');
					}
				});
				
			},
			
			//滑动底部触发事件
			layerLower(e){
				if (this.page < this.totalPage) {
					this.page++;
					this.getDataFun();
				}
			},

			//跳转修改银行卡事件
			setUpBtn() {
				app.goto('/pagesExt/my/setbankinfo');
			},
		}
	}
</script>

<style lang="scss">
	.overHidden {
		//超出一行隐藏,显示省略号
		overflow: hidden; //超出文本隐藏
		text-overflow: ellipsis; //溢出使用省略号显示
		white-space: nowrap; // 默认不换行；
	}
	.weight_bold {
		font-weight: bold;
	}

	.lr_spacing {
		letter-spacing: 1px;
	}

	.contentView {
		width: 100%;
		float: left;
		/* height:100%; */
	}

	.balanceBox {
		width: 96%;
		float: left;
		margin: 20rpx 2% 10rpx 2%;
		border-radius: 10px;
		font-size: 24rpx;
		background-image: url(https://test.jhwl.site/static/img/QBBJ.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #fff;
	}

	.balanceShopInfo {
		width: 100%;
		padding: 20rpx 3%;
		display: flex;
		align-items: center;
	}

	.balanceShopInfo image {
		width: 80rpx;
		height: 80rpx;
	}

	.balanceShopName {
		margin-left: 20rpx;
		line-height: 48rpx;
		display: flex;
		flex-direction: column;
	}

	.walletBalanceBox {
		width: 100%;
		float: left;
		/* 		width: 92%; */
		padding: 15rpx 0;
		display: flex;
		/* margin:0 4%; */
		font-weight: bold;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}

	.walletBalance {
		font-size: 65rpx;
		margin-top: 10rpx;
		font-weight: 500;
	}

	.walletBalanceBoxS {
		width: 60%;
		float: left;
	}

	.walletBalanceBoxA {
		width: 40%;
		float: left;
	}

	.walletBalanceBoxXS {
		width: calc(40% - 20rpx);
		float: right;
		text-align: right;
		padding-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.walletBalanceBoxXS text {
		background-color: #f56c6c;
		padding: 10rpx 20rpx;
		border-radius: 7rpx;
	}

	.walletBalanceBoxView {
		width: 92%;
		float: left;
		padding: 0 4%;
	}

	.availableBalanceBox {
		width: calc(45% - 1px);
		float: left;
		line-height: 40rpx;
		padding: 10rpx 0 10rpx 0;
		border-right: 1px solid #ccc;
		margin-left: 5%;
	}

	.settlementBalanceBox {
		width: 45%;
		float: left;
		line-height: 40rpx;
		padding: 10rpx 0 10rpx 5%;
	}

	.shopTitle {
		width: 100%;
		float: left;
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		color: #868686;
		line-height: 35px;
	}

	.layer {
		width: 100%;
		height: 100vh;
		float: left;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.6;
		z-index: 1000;
	}

	.layerTipsBox {
		width: 100%;
		height: calc(100% - 75px);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #CCCCCC;
	}

	.layerBox {
		width: 84%;
		float: left;
		height: 70vh;
		position: fixed;
		top: 15vh;
		padding: 10rpx 20rpx 20rpx 20rpx;
		left: 8%;
		background-color: #f1f1f1;
		border-radius: 15rpx;
		z-index: 1001;
	}

	.layerScrollView {
		width: 100%;
		float: left;
		margin-top: 5px;
		height: calc(100% - 75px);
	}

	.layerContent {
		width: 100%;
		padding: 15rpx;
		display: flex;
		font-size: 24rpx;
		align-items: center;
		margin-bottom: 10rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.uvCollapseShopImg {
		width: 70rpx;
		height: 70rpx;
		float: left;
	}

	.uvCollapseShopImg image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.uvCollapseShopInfo {
		width: calc(100% - 90rpx);
		float: left;
		margin-left: 15rpx;
		line-height: 40rpx;
	}

	.themeColor {
		color: #f56c6c;
	}

	.timeByMoney {
		display: flex;
		justify-content: space-between;
	}
</style>